<template>
    <div id="footer">
        <footer>
        <div class="footer">
            <div class="footercontainer">
                <div class="ct1">
                    <h3>账号设置</h3>
                    <div class="line"></div>
                    <ul>
                        <li><a target="_blank" href="/help/shiming">实名认证</a></li>
                        <li><a target="_blank" href="/help/jiaoyi">交易设置</a></li>
                        <li><a target="_blank" href="/help/jiaoyi">交易防骗指南</a></li>
                    </ul>
                </div>
                <div class="ct2">
                    <h3>钱包相关</h3>
                    <div class="line"></div>
                    <ul>
                        <li><a target="_blank" href="/help/jiaoyi">收费标准</a></li>
                        <li><a target="_blank" href="/help/jiaoyi">充值提现</a></li>
                    </ul>
                </div>
                <div class="ct3">
                    <h3>交易相关</h3>
                    <div class="line"></div>
                    <ul>
                        <li><a target="_blank" href="/help/jiaoyi">交易报价失败原因汇总</a></li>
                        <li><a target="_blank" href="/help/jiaoyi">新手常见问题</a></li>
                        <li><a target="_blank" href="/help/jiaoyi">FAQ</a></li>
                        <li><a target="_blank" href="/help/jiaoyi">什么是交易暂挂</a></li>
                    </ul>
                </div>
                <div class="ct4">
                    <h3>便捷支付</h3>
                    <div class="line"></div>
                    <ul>
                        <li>支付宝支付</li>
                        <li>银行卡支付</li>
                        <li>微信支付</li>
                    </ul>
                </div>
                <div class="ct5">
                    <h3>手机 BUFF</h3>
                    <div class="line"></div>
                    <div><img src="https://buff.163.com/static/images/qr-code.png" alt=""></div>
                </div>
                <div class="longline"></div>
            </div>
            <div class="footertxt">
                <div class="footerinner">
                    <span> 网易公司版权所有 ©1997-2022 </span>
                    <a href="" target="_blank">网易BUFF隐私政策及儿童个人信息保护规则</a>
                    <a href="http://www.beian.miit.gov.cn" target="_blank">ICP备案:粤B2-20090191-18</a>
                </div>
            </div>
        </div>
    </footer>
        <div class="floatbar">
            <ul>
                <li >
                    <a href="/app" target="_blank" style="color: #eee;">APP</a>
                    </li>
                <li >
                        <a href="/userindex/collect" style="color: #eee;">收藏</a>
                    </li>
                <li >   
                    <a type="text" @click="oopen" style="color: #eee;">公众号</a>
                    </li>
                <li >
                <p style="color:#eee;cursor: pointer">微博</p>
                    <ul class="ul2">
                        <li>
                            <div class="fi">
                                <div style="padding-top: 10px ;">
                                    <img src="https://buff.163.com/static/images/weibo-qr.png" alt=""> 
                                </div>
                                <p style="font-size: 8px;text-align: center;color: #E4E8EE;">请关注网易BUFF官方微博</p>
                            </div>
                        </li>
                    </ul>
                </li>
                <li >
                    <a href="/help" style="color: #eee;">帮助</a>
                    </li>
                <li >
                    <a href="#" style="color: #eee;">客服</a>
                </li>
                <li @click="toTop">TOP</li>
            </ul>
        </div>
        <div>
                    <el-dialog
                    :visible.sync="dialogVisible"
                    width="20%"
                    :before-close="handleClose">
                    <div>
                    <p style="text-align: center ;color: #515151;">微信公众号</p>
                    <p style="text-align: center ;color: #959595;">网易BUFF公众号</p>
                    <ul>
                    <li style="color: #a3a3a3;font-size: 12px;margin-top:20px;">扫描下方二维码，关注 "网易BUFF"
                        微信公众号；
                    </li>
                    </ul>
                    <img src="https://buff.163.com/static/images/weixin-qr.png" width="140px" height="140px"> 
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>
        </div>

    </div>
</template>
<script>
export default {
    data() {
      return {
        dialogVisible: false
      }
    },
  methods: {
    toTop() {
      document.documentElement.scrollTop = 0;
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      oopen(){
        this.dialogVisible = true
        
      }
  }
}
</script>
<style scoped>
 *{
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #959595;
    cursor: pointer;
}
li{
    list-style: none;
}

.footer a:hover {
    color: #c6c847;
}
.footer {
    line-height: 24px;
    background: #272a2c url(https://cdn.buff.163.com/static/images/site/footer-bg.jpg) no-repeat center center !important;
    color: #959595;
    min-width: 1200px;
    overflow: hidden;
}
.floatbar li:nth-last-child(1){
   color:#eee;cursor: pointer
}
.footercontainer {
    padding: 50px 0 20px 100px;
    width: 1200px;
    margin: 0 auto;
}

.ct1,.ct2,.ct3,.ct4,.ct5 {
    width: 228px;
    float: left;
}

.line {
    width: 12px;
    height: 2px;

}

.ct1 h3,.ct2 h3,.ct3 h3,.ct4 h3,.ct5 h3 {
    color: #E4E8EE;
    font-weight: 700;
    margin: 9px 0;
    font-size: 15px;
}

.ct1 li,.ct2 li,.ct3 li,.ct4 li {
    height: 32px;
    line-height: 32px;
}

.ct5 img {
    width: 75px;
    height: 75px;
    margin-top: 10px;
    padding: 2px;
    background-color: #fff;
}

.longline {
    height: 1px;
    background-image: linear-gradient(-90deg, rgba(39, 42, 44, 0) 0, #4773c8 49%, rgba(39, 42, 44, 0) 100%);
    margin-top: 200px;
}

.footerinner {
    width: 1024px;
    text-align: center;
    margin: 0 auto;
    padding: 0 0 10px;
    font-size: 12px;
    line-height: 20px;
}

.floatbar {
    position: fixed;
    right: 6px;
    top: 40%;
    background-color: #272a2c;
    z-index: 100;
}

.floatbar a {
    display: block;
    width: 60px;
    text-align: center;
    color: #959595;
    height: 20px;
}

.floatbar .ul2 {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 30%);
    border-radius: 2px;
    background: #343e4b;
}
.floatbar li:hover {
    background-color: #272a2c;
}

.goup {
    background: #343e4b;
    margin-top: 20px;
    border-radius: 2px;
    color: #959595;
    padding: 2px;
    width: 60px;
    text-align: center;
}

.goup:hover {
    background-color: #272a2c;
    cursor: pointer;
}

.fi {
    width: 220px;
    height: 200px;
    position: absolute;
    right: 70px;
    top: -30px;
    background: #222;
    display: none;
}

.floatbar li:hover .fi {
    display: block;
}

#ff {
    background-color: #fff;
    width: 360px;
    height: 404px;
    position: absolute;
    right: 240px;
    top: -300px;
    display: none;
    border: 1px solid #ccc;
}
</style>